<template>
  <div>
    <div
      class="bg-[url('./assets/imgs/bg.jpg')] bg-cover bg-center h-screen text-white p-2 flex overflow-hidden"
      v-if="data"
    >
      <!-- 左-->
      <div class="flex-1 bg-opacity-50 bg-slate-800 mr-5 p-3 flex flex-col">
        <!-- 横向树状图-->
        <HorizontalBarChart :data="data.regionData" class="h-1/3 box-border pb-4" />
        <!-- 雷达图-->
        <RadarChart class="h-1/3 box-border pb-4" />
        <!-- 关系图-->
        <RelationChart class="h-1/3" />
      </div>
      <!-- 中-->
      <div class="w-1/2 mr-5 flex flex-col">
        <!-- 数据总览图-->
        <TotalDataChart class="bg-opacity-50 bg-slate-800 p-3" />
        <!-- 地图-->
        <MapChart class="flex-1 bg-opacity-50 bg-slate-800 p-3 mt-4" />
      </div>
      <!-- 右-->
      <div class="flex-1 bg-opacity-50 bg-slate-800 p-3 flex flex-col">
        <!-- 竖向树状图-->
        <VerticalBarChart class="h-1/3 box-border pb-4" />
        <!-- 环形图-->
        <RingBarChart class="h-1/3 box-border pb-4" />
        <!-- 云图-->
        <DataCloudChart class="h-1/3" />
      </div>
    </div>
  </div>
</template>

<script setup>
import DataCloudChart from '@/components/DataCloudChart.vue'
import HorizontalBarChart from '@/components/HorizontalBarChart.vue'
import MapChart from '@/components/MapChart.vue'
import RadarChart from '@/components/RadarChart.vue'
import RelationChart from '@/components/RelationChart.vue'
import RingBarChart from '@/components/RingBarChart.vue'
import TotalDataChart from '@/components/TotalDataChart.vue'
import VerticalBarChart from '@/components/VerticalBarChart.vue'
import { getVisualization } from '@/api/visualization'
import { ref, onMounted } from 'vue'

const data = ref(null)

const loadData = async () => {
  data.value = await getVisualization()
}

onMounted(() => {
  loadData()
  setInterval(loadData, 3000)
})
</script>

<style scoped></style>
